<template>
  <div class="title">优惠券</div>
  <div class="coupon" @click="openModel">
    <img class="icon" src="../../assets/images/icons/coupon.png" alt="" />优惠券
    <span class="more">></span>
    <span class="money" v-if="total">-￥{{ total }}</span>
    <span class="money" v-if="total == 0 && listData.length > 0"
      >{{ listData.length }}张可用</span
    >
    <span class="money" v-if="total == 0 && listData.length === 0"
      >暂无</span
    >
  </div>
  <!-- 优惠券弹窗 -->
  <van-popup
    v-model:show="showPop"
    round
    closeable
    position="bottom"
    :style="{ height: '45%' }"
  >
    <div class="pop">
      <p class="title">
        <img
          class="icon"
          src="../../assets/images/icons/coupon.png"
          alt=""
        />优惠券
      </p>
      <div class="content-list">
        <div
          class="content"
          v-for="item in listData"
          @click="changeCoupon(item)"
          :key="item.id"
        >
          <div class="money">
            <p>
              ￥<span class="fz36">{{ item.price }}</span>
            </p>
            <p class="desc">满100可用</p>
          </div>
          <div class="detail">
            <p class="sub-title">景点门票优惠券</p>
            <p class="time">有效期至：2023-8-23</p>
          </div>
          <img
            v-if="item.checked"
            class="status"
            src="../../assets/images/icons/checked.png"
            alt=""
          />
          <span v-else class="status circle"></span>
        </div>
      </div>
      <van-button type="primary" class="mt20" block @click="confirm"
        >确定</van-button
      >
    </div>
  </van-popup>
</template>
<script setup>
import { ref } from "vue";

const showPop = ref(false);
const props = defineProps({
  couponList: Array,
});

const listData = ref([]);
const total = ref(0);
listData.value = props.couponList;

const emit = defineEmits(["couponInfo"]);

// 打开弹窗
const openModel = () => {
  if (listData.value.length > 0) showPop.value = true;
};
// 选择优惠券
const changeCoupon = (info) => {
  info.checked = !info.checked;
  listData.value.forEach((el) => {
    if (el.id !== info.id) el.checked = false;
  });
  total.value = info.price;
};
// 确定
const confirm = () => {
  emit("couponInfo", listData.value);
  showPop.value = false;
};
</script>
<style scoped lang="scss">
.title {
  margin-left: 15px;
  margin-bottom: 10px;
  font-size: 1.4rem;
  color: #999;
}
.coupon {
  margin: 15px;
  padding: 15px;
  background: linear-gradient(180deg, #fffffc 0%, #fffffc 100%);
  box-shadow: 0px 7px 15px 0px rgba(54, 141, 88, 0.05);
  border-radius: 10px;
}
.icon {
  width: 20px;
  height: 15px;
  vertical-align: text-top;
  margin-right: 5px;
}
.money {
  float: right;
  margin-right: 5px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #ed6316;
}
.more {
  float: right;
  font-weight: bold;
  color: #999;
}
// 弹窗
.pop {
  height: 100%;
  padding: 0 15px;
  overflow: hidden;
  .title {
    font-size: 2rem;
    color: #2f3836;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
    img {
      vertical-align: unset;
    }
  }
}
.content-list {
  height: calc(100% - 140px);
  overflow-y: auto;
}
.content {
  position: relative;
  display: flex;
  height: 80px;
  margin: 10px 0;
  background: url("../../assets/images/icons/coupon_bg.png") no-repeat;
  background-size: contain;
  .money {
    width: 26.3%;
    margin-top: 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    color: #fff;
  }
  .desc {
    margin-top: 5px;
    font-weight: normal;
  }
  .detail {
    margin-left: 10px;
    .sub-title {
      margin-top: 18px;
      font-size: 1.6rem;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .time {
      padding: 5px 10px;
      color: #ed6316;
      background: rgba(237, 99, 22, 0.1);
      border-radius: 3px;
      font-size: 1.2rem;
    }
  }
  .status {
    position: absolute;
    right: 16px;
    top: 25px;
    width: 20px;
    height: 20px;
  }
  .circle {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #bbbbbb;
    border-radius: 50%;
  }
}
.fz36 {
  font-size: 36px;
}
.mt20 {
  margin-top: 20px;
}
</style>